<template>
	<view v-if="isPlace" class="fixed-bottom-module-place"></view>
	<view class="module-wrap fixed-bottom-module" :class="[classList]">
		<slot></slot>
	</view>
</template>

<script lang="ts" setup>
import { ref, onMounted, computed, getCurrentInstance, nextTick, defineComponent } from "vue";

const props = defineProps({
	backColor: {
		type: String,
		default: "#fff",
	},
	minHeight: {
		type: String,
		default: "50px",
	},
	type: String,
	wrap: Boolean,
	align: {
		type: String,
		default: "top",
	},
	justify: {
		type: String,
		default: "start",
	},
	position: {
		type: String,
		default: "fixed"
	},
	isPlace: {
		type: Boolean,
		default: true
	},
	// 占位微调高度
	placeDistance: {
		type: Number,
		default: 6
	}
});

const classList = computed(() => {
	let list = [];

	if (props.type) {
		list.push(`fixed-bottom-module--${props.type}`);
	}

	if (props.justify) {
		list.push(`is-justify-${props.justify}`);
	}

	if (props.align) {
		list.push(`is-align-${props.align}`);
	}

	if (props.wrap) {
		list.push("is-wrap");
	}

	return list.join(" ");
});

const domHeight = ref<string>("50px");

const resize = () => {
	const instance = getCurrentInstance()

	nextTick(() => {
		const query = uni.createSelectorQuery().in(instance);
		query
			.select(".fixed-bottom-module")
			.boundingClientRect((data: any) => {
				// console.log("得到布局位置信息" + JSON.stringify(data));
				// console.log("节点高度" + data.height);
				// const systemInfo = uni.getSystemInfoSync();

				domHeight.value = `${data.height - props.placeDistance + 10}px`;
			})
			.exec();
	});
};

onMounted(() => {
	resize()
});

defineExpose({
	backColor: props.backColor,
	minHeight: props.minHeight,
	position: props.position,
	classList,
	resize
});
</script>

<style lang="scss" scoped>
.fixed-bottom-module-place {
	position: relative;
	width: 100%;
	height: v-bind("domHeight");
}

.fixed-bottom-module {
	width: 100%;
	// min-height: v-bind("minHeight");
	padding: 14rpx 30rpx;
	position: v-bind("position");
	flex-shrink: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: v-bind("backColor");
	@include iosSafeArea(padding, 14rpx, bottom, bottom);
	box-sizing: border-box;
	box-shadow: 0 -2rpx 6rpx 2rpx rgba(51, 51, 51, 0.1);

	&--flex {
		display: flex;

		&::after,
		&::before {
			display: none;
		}
	}

	&.is-justify-center {
		justify-content: center;
	}

	&.is-justify-end {
		justify-content: flex-end;
	}

	&.is-justify-space-between {
		justify-content: space-between;
	}

	&.is-justify-space-around {
		justify-content: space-around;
	}

	&.is-align-center {
		align-items: center;
	}

	&.is-align-bottom {
		align-items: flex-end;
	}

	&.is-wrap {
		flex-wrap: wrap;
	}
}
</style>
